ScrapboxからGoogle APIのAccess Tokenを取得する
*.googleapis.comはScrapboxにおけるCORB・CORS制限に引っかからないので、TamperMonkeyなしにScrapboxからGoogle APIを使うことができる
only Firefox
認証情報の取得手順
0. /takker/Google OAuth 2.0のAccess Tokenを取得する
1. Authorization Codeを取得する
code:js
(async () => {
const {openAuthWindow} = await import('/api/code/programming-notes/ScrapboxからGoogle_APIのAccess_Tokenを取得する/script.js');
})();
code:script.js
export function openAuthWindow({clientId, redirectURI = 'http://localhost:8080', scopes} = {}) {
window.open(https://accounts.google.com/o/oauth2/v2/auth?response_type=code&client_id=${clientId}&redirect_uri=${redirectURI}&access_type=offline&scope=${scopes.join('%20')});
}
code:script.d.ts
export function openAuthWindow(props: {
clientId: string;
redirectURI: string;
scopes: string[];
}): void;
認証した後にredirectされるページのURL parametercodeに入っている文字列がAuthorization Codeである
Refresh Tokenも取得したいときは、redirect URIにhttps://localhost:8080 を指定する
2. Authorization CodeとAccess Tokenとを交換する
from Step 5: Exchange authorization code for refresh and access tokens | Using OAuth 2.0 for Web Server Applications  |  Google Identity
code:script.js
export async function getTokens({clientId, clientSecret, authorizationCode, redirectURI = 'http://localhost:8080'}) {
// parametersを組み立てる
const body = new URLSearchParams();
body.append('client_id', clientId);
body.append('client_secret', clientSecret);
body.append('code', authorizationCode);
body.append('grant_type', 'authorization_code');
body.append('redirect_uri', redirectURI);
body.append('access_type', 'offline');
// access tokenを取得する
const res = await fetch(https://oauth2.googleapis.com/token, {
method: 'POST',
body,
});
return await res.json();
}
code:script.d.ts
export function getTokens(props: {
clientId: string;
clientSecret: string;
redirectURI: string;
authorizationCode: string;
}): Promise<{
error_description: string;
} | {
access_token: string;
refresh_token?: string;
scope: string;
expires_in: number;
token_type: 'Bearer';
}>;
Access Tokenの有効期限が切れたら、Refresh Tokenで更新する
Access Tokenの有効期限を確認する
from Access Tokenの状態を確認する | Google APIのAccess Tokenをお手軽に取得する - Qiita
code:script.js
export async function verifyToken(accessToken) {
const res = await fetch(https://www.googleapis.com/oauth2/v3/tokeninfo?access_token=${accessToken});
return await res.json();
}
code:script.d.ts
export function verifyToken(accessToken: string): Promise<{
error_description: string;
} | {
azp: string;
aup: string;
scope: string;
exp: string; // 中身は数値
expires_in: string; // 中身は数値
access_type: 'online' | 'offline';
}>;
Access Tokenを更新する
from Refreshing an access token (offline access) | Using OAuth 2.0 for Web Server Applications  |  Google Identity
code:script.js
export async function refreshToken({clientId, clientSecret, refreshToken}) {
// parametersを組み立てる
const body = new URLSearchParams();
body.append('client_id', clientId);
body.append('client_secret', clientSecret);
body.append('grant_type', 'refresh_token');
body.append('refresh_token', refreshToken);
// access tokenを更新する
const res = await fetch(https://oauth2.googleapis.com/token, {
method: 'POST',
body,
});
return await res.json();
}
code:script.d.ts
export function refreshToken(props: {
clientId: string;
clientSecret: string;
refreshToken: string;
}): Promise<{
error_description: string;
} | {
access_token: string;
scope: string;
expires_in: number;
token_type: 'Bearer';
}>;
References
Using OAuth 2.0 for Web Server Applications  |  Google Identity
Qiita.icon